<template>
  <view class="PageHeader"
        :style="'background-color:'+nowColor1"
>
    <view :style="'height:'+stateBarHeight+'px'"></view>
    <view class="PageHeader-text" :style="stateBarHeight>0?'display: flex;align-items: center;height: 110rpx;':'margin-top:40rpx'">
      武院校园菌
    </view>
  </view>
</template>

<script>
import topHeight from "@/components/top-height"
import {mapState} from "vuex"
let that = null;
export default {
  name: "PageHeader",
  components:{
    topHeight,
  },
  filters:{
    themeColor(){
      let style= ""
      if(that.stateBarHeight){
        style+="height:120rpx";
      }
      style +='background-color:'+that.$store.state.nowColor;
      console.log(style);
      return style;
    }
  },
  computed:{
    ...mapState({
      nowColor: state => state.nowColor
    }),
    nowColor1(){
      return this.$store.state.nowColor;
    }
  },
  // watch:{
  //   "$store.state.nowColor":{
  //     handler(old,newValue){
  //       this.color = newValue;
  //     }
  //   }
  // },
  created() {
    that = this;
    console.log(this.$store.state.nowColor)
  },
  data(){
    return {
      stateBarHeight:0,
      // color:this.$store.state.nowColor
    }
  },
  mounted() {
    this.stateBarHeight = this.$store.state.stateBarHeight;
    console.log(this.$store.state.stateBarHeight)
  }
}
</script>

<style lang="scss" scoped>
.PageHeader{
  width: 100%;
  //background-color: #58AF7A;
  //@include global-header-background-color();
  color: #ffffff;
  font-size: 40rpx;
  overflow: hidden;
  .PageHeader-text{
    margin-left: 40rpx;
  }
}
</style>
